<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<title>OS3 Grid Example 1</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css" />
	<link type="text/css" rel="stylesheet" href="../os3grid.css" />
	<script src="../../../os3jslib/liwe.js" type="text/javascript"></script>
	<script src="../os3grid.js" type="text/javascript"></script>
	


</head>
<body>
<div id="block_top">
	<h2 class="center">OS3Grid Example 1 - Simple Grid</h2>
	<h4 class="center">By Fabio Rotondo - fsoft (@) sourceforge ( dot ) net</h4>
</div>

<div id="block_left">
	<div class="menu_title">Examples</div>

	<div>
		<a href="index.html">Main Page</a><br />
		<a href="ex1.html">Simple Grid</a><br />
		<a href="ex2.html">Sortable Grid</a><br />
		<a href="ex3.html">Selectable Cells Grid</a><br />
		<a href="ex4.html">Editable Grid</a><br />
		<a href="ex5.html">Custom Callbacks</a><br />
		<a href="ex6.html">Rows Selection</a><br />
		<a href="ex7.html">Column Resize</a><br />
		<a href="ex8.html">Column Renderers</a><br />
		<a href="ex9.html">Delete row</a><br />
	</div>

	<div class="menu_title">Advanced Examples</div>
	<div>
		<a href="adv_styles.html">Setting and Using Styles</a><br />
		<a href="adv_edit.html">Using OS3Grid to edit a dataset</a><br />
		<a href="adv_cell_manip.html">Advanced Cell Value Manipulation</a><br />
	</div>

	<div class="menu_title">Support OS3Grid</div>
	<a href="http://sourceforge.net/donate/index.php?group_id=132180" target="_blank"><img src="http://images.sourceforge.net/images/project-support.jpg" width="88" height="32" border="0" alt="Support OS3Grid" /> </a>
</div>

<div id="block_middle">
	<div>
		This is the very basic example. In this example I'll show you how to setup the basic grid and populate it with data.<br />
		As you'll see, it's not difficult at all! :-)
		<br />

		First of all, you have to include the OS3Grid files inside your page, this is as simply as:

		<div class="code"><pre>
			&lt;link type="text/css" rel="stylesheet" href="os3grid.css" /&gt;
			&lt;script src="os3grid.js" type="text/javascript"&gt;&lt;/script&gt;
		</pre></div>

		Please, remember to set the right paths of <tt>os3grid.css</tt> and <tt>os3grid.js</tt>.<br />

		Then, for the real stuff, you have to create an HTML object as a <em>placeholder</em> where the 
		grid will be rendered once created.
		The HTML object <em>MUST</em> have an unique id (for the <tt>getElementById()</tt> call by the Grid itself).
		Usually, I create a &lt;div&gt; block, like the following:

		<div class="code"><pre>
			&lt;div id="grid" &gt;&lt;/div&gt;
		</pre></div>

		Then, you have to create your grid using JavaScript. Grid attributes and settings are explained in 
		<a href="../website/docs.html">Standard Grid Documentation</a>, here I'll give you just a glimpse at the code:

		<div class="code"><pre>
			&lt;script type="text/javascript"&gt;
				// Create an OS3Grid instance
				var g = new OS3Grid ();

				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'Name', 'Surname', 'E-Mail Address' );

				// If contents is bigger than container, Grid will automatically show scrollbars
				g.set_scrollbars ( true );

				// The grid will have a solid border (these are CSS attributes)
				g.set_border ( 1, "solid", "#cccccc" );

				// Now, we add some rows to the grid
				g.add_row ( 'fsoft', 'Fabio', 'Rotondo', 'fsoft (@) sourceforge (dot) net' );
				g.add_row ( 'john', 'John', 'Bustone', 'jbust (@) somewhere (dot) net' );
				g.add_row ( 'mkey', 'Mark', 'Key', 'mkey (@) okay (dot) net' );
				g.add_row ( 'jdoe', 'John', 'Doe', 'redbull (@) batman (dot) net' );

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			&lt;/script&gt;
		</pre></div>

		That's all! The result should be quite similar with the following:
		<div class="result">

			<div id="grid"></div>
			<script type="text/javascript">
				// Create an OS3Grid instance
				var g = new OS3Grid ( 'grid' );

				// Grid Headers are the grid column names
				g.set_headers ( 'nick', 'Name', 'Surname', 'E-Mail Address' );

				// Now, we add some rows to the grid
				g.add_row ( 'fsoft', 'Fabio', 'Rotondo', 'fsoft (@) sourceforge (dot) net' );
				g.add_row ( 'john', 'John', 'Bustone', 'jbust (@) somewhere (dot) net' );
				g.add_row ( 'mkey', 'Mark', 'Key', 'mkey (@) okay (dot) net' );
				g.set_col_align ( 0, "right" );
				g.add_row ( 'jdoe', 'John', 'Doe', 'redbull (@) batman (dot) net' );

				// Show the grid replacing the original HTML object with the "grid" ID.
				g.render ( 'grid' );
			</script>

		</div>
	</div>
</div>

</body>
</html>

